import 'package:flutter/material.dart';
import '../model/post.dart';

/**
 * sliver的使用
 */
class SliverDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          //显示内容在安全区域
          SliverAppBar(
            title: Text('NIHAO'),
            //固定顶部
            pinned: false,
            floating: true,
            //设置伸展的高度
            expandedHeight: 178.0,
            //设置弹性空间
            flexibleSpace: FlexibleSpaceBar(
              title: Text(
                'Nihao Flutter'.toUpperCase(),
                style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.white,
                    //文字间距
                    letterSpacing: 2.0,
                    //文字粗细
                    fontWeight: FontWeight.w400),
              ),
              background: Image.network(
                postList[8].imageUrl,
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverSafeArea(
            //带有边距的sliver
            sliver: SliverPadding(
              padding: EdgeInsets.all(20.0),
              sliver: SliverListDemo(),
            ),
          ),
        ],
      ),
    );
  }
}

class SliverListDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return Padding(
          padding: EdgeInsets.only(bottom: 32.0),
          child: Material(
            //圆角
            borderRadius: BorderRadius.circular(12.0),
            //阴影
            elevation: 14.0,
            //设置阴影的颜色
            shadowColor: Colors.grey.withOpacity(0.6),
            child: Stack(
              children: <Widget>[
                AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Image.network(
                    postList[index].imageUrl,
                    fit: BoxFit.cover,
                  ),
                ),
                Positioned(
                  top: 32.0,
                  left: 32.0,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        postList[index].title,
                        style: TextStyle(
                          fontSize: 18.0,
                          color: Colors.white,
                        ),
                      ),
                      Text(
                        postList[index].author,
                        style: TextStyle(
                          fontSize: 13.0,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }, childCount: postList.length),
    );
  }
}

/**
 * SliverGrid的使用
 */
class SliverGridDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverGrid(
        delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
          return Container(
            child: Image.network(
              postList[index].imageUrl,
              fit: BoxFit.cover,
            ),
          );
        }, childCount: postList.length),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 8.0,
          mainAxisSpacing: 8.0,
          //网格显示的比例
          childAspectRatio: 2.0,
        ));
  }
}
